<template>
	<view class="reset-password-content">
		<u-navbar :is-back="true" title="重置密码"></u-navbar>
		<u-form :model="form" ref="uForm" :error-type="errorType">
			<u-form-item label="学号" prop="id" label-width="150" v-show="!isShowPasswordInput">
				<u-input placeholder="请输入学号" v-model="form.id" type="number"></u-input>
			</u-form-item>
			<u-form-item label="邮箱账户" prop="email" label-width="150" v-show="!isShowPasswordInput">
				<u-input placeholder="请输入邮箱(目前只支持QQ邮箱)" v-model="form.email" type="text"></u-input>
			</u-form-item>
			<u-form-item label="验证码" prop="code" label-width="150" v-show="!isShowPasswordInput">
				<u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
				<u-button slot="right" type="success" size="mini" @click="getCode" :disabled="!canGetVerifacationCode">
					{{codeTips}}
				</u-button>
			</u-form-item>
		</u-form>
		<u-form :model="formHide" ref="oForm" :error-type="errorType">
			<u-form-item label="重置密码" prop="password" label-width="150" v-show="isShowPasswordInput">
				<u-input v-model="formHide.password" type="password" placeholder="请输入密码"></u-input>
			</u-form-item>
			<u-form-item label="确认密码" prop="verifyPassword" label-width="150" v-show="isShowPasswordInput">
				<u-input v-model="formHide.verifyPassword" type="password" placeholder="请确认密码"></u-input>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit" v-show="!isShowPasswordInput">确认</u-button>
		<u-button type="primary" @click="reset" v-show="isShowPasswordInput">重置</u-button>

		<!-- 以下为绑定邮箱时，必要的其他弹出组件 -->
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单填写错误的提示形式
				errorType: ['message'],
				codeTips: '获取验证码',
				canGetVerifacationCode: false,
				isShowPasswordInput: false,
				// 表单数据
				form: {
					// 因为上一个注册页面已经将学生基本信息存入本地文件中
					// 故此处不需要
					id: '',
					email: '',
					code: '',
				},
				formHide: {
					password: '',
					verifyPassword: '',
				},
				rules: {
					id: [{
							required: true,
							message: '请输入学号',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur']
						},
						{
							type: 'number',
							message: '学号必须为数字',
							trigger: ['change', 'blur']
						},
						{
							min: 8,
							message: '学号至少为 8 位',
							trigger: ['change', 'blur']
						}
					],
					email: [{
							required: true,
							message: '请输入 QQ 邮箱',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur']
						},
						{
							// type: 'email',
							validator: (rule, value, callback) => {
								// 利用正则表达式检验 QQ 邮箱格式
								let pattern = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@qq\.com/;
								let bool = pattern.test(value);
								console.log(bool);
								if (bool) {
									this.$data.canGetVerifacationCode = true;
								} else {
									this.$data.canGetVerifacationCode = false;
								}
								// 返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return bool;
							},
							message: '请输入正确的 QQ 邮箱格式',
							trigger: ['change', 'blur']
						}
					],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}],
				},
				orules: {
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change', 'blur'],
						}
					],
					verifyPassword: [{
							required: true,
							message: '请重新输入密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.formHide.password;
							},
							message: '两次输入的密码不一致',
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},

		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.post('/user/check/code', {
							code: this.$data.form.code
						}).then(res => {
							let resultCode = res.statusCode;
							if (resultCode === 0) {
								this.$data.isShowPasswordInput = true;
							} else {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error',
									icon: false,
									position: 'bottom'
								});

							}

							// console.log(res);
						});
					} else {
						/**
						 * 提示用户信息未输入完成
						 */
						this.$refs.uToast.show({
							title: '请填写完整信息',
							type: 'error',
							icon: false,
							position: 'bottom'
						});
					}
				})
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					});
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
					this.$u.post('/user/send/email', {
						QQEmail: this.$data.form.email
					}).then(res => {
						let restult = res.statusCode;
						if (restult !== 0) {
							/**
							 * 如果返回结果代码不为 0，则发生错误提示用户
							 */
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								icon: false,
								position: 'bottom'
							});
						}
					});
				} else {
					this.$refs.uToast.show({
						title: '倒计时结束后再发送',
						type: 'error',
						icon: false,
						position: 'bottom'
					});
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			reset() {
				this.$refs.oForm.validate(valid => {
					this.$u.post('/user/update/password', {
						id: this.$data.form.id,
						password: this.$data.formHide.password
					}).then(res => {
						let restult = res.statusCode;
						console.log(res);
						/**
						 * 如果成功返回则结果代码为 0，跳转登录界面
						 */
						if (restult === 0) {
							this.$u.route({
								type: 'navigateTo',
								url: '/pages/login/index',
							});
							/**
							 * 否则则弹提示窗口提示用户
							 */
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								icon: false,
								position: 'bottom'
							});
						}
					});
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.$refs.oForm.setRules(this.orules);
		}
	}
</script>

<style>
	/* 整个页面加了美化效果 */
	.reset-password-content {
		margin: 0rpx 50rpx;
	}
</style>
